<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <router-link to="/goods_manager/goodsInbounch">商品入库</router-link>|
    <router-link to="/goods_manager/inventoryStatistics">库存统计</router-link>|
    <router-link to="/goods_manager/doosView">配货出库</router-link>|
    <router-link to="/goods_manager/storesAllocate">门店调拨</router-link>|
    <router-link to="/goods_manager/returnGoods">门店退货</router-link>|
    <router-link to="/goods_manager/codedIntoStorage">固定编码入库</router-link>|
    <router-link to="/goods_manager/purchaseReturnsOrders">采购退货</router-link>|
    <router-link to="/goods_manager/productDisassembly">商品拆料</router-link>
    <div class="tableText">
      <div class="head">
        <div :span="3">
          <router-link to="/goods_manager/purchaseReturnsOrders">采购退货</router-link>
        </div>
        <div :span="3">
          <router-link to="/goods_manager/productDisassembly">商品拆料</router-link>
        </div>
        <div :span="3">
          <router-link to>商品销售</router-link>
        </div>
        <div :span="3">
          <router-link to>销售退货</router-link>
        </div>
      </div>
      <div class="center">
        <div :span="3">
          <router-link to="/goods_manager/goodsInbounch">商品入库</router-link>
        </div>
        <div :span="3">
          <router-link to="/goods_manager/inventoryStatistics">库存统计</router-link>
        </div>
        <div :span="3">
          <router-link to="/goods_manager/doosView">配货出库</router-link>
        </div>
        <div :span="3">
          <router-link to="/goods_manager/inventoryStatistics">库存统计</router-link>
        </div>
        <div :span="3">
          <router-link to="/goods_manager/storesAllocate">门店调拨</router-link>
        </div>
      </div>
      <div class="footer">
        <div :span="3">
          <router-link to="/goods_manager/codedIntoStorage">固定编码入库</router-link>
        </div>
        <div :span="3">
          <router-link to="/goods_manager/returnGoods">门店退货</router-link>
        </div>
        <div :span="3">
          <router-link to>库存盘点</router-link>
        </div>
      </div>
      <div class="line"></div>
      <div class="line line1"></div>
      <div class="line line2"></div>
      <div class="line line3"></div>
      <div class="line line4"></div>
      <div class="line line5"></div>
      <div class="line6"></div>
      <div class="line7"></div>
      <div class="line8"></div>
      <div class="line8 line9"></div>
      <div class="line8 line10"></div>
      <div class="line8 line11"></div>
      <div class="line12"></div>
      <div class="line12 line13"></div>
      <div class="line14"></div>
      <div class="line14 line15"></div>
      <div class="angle"></div>
      <div class="angle angle1"></div>
      <div class="angle2"></div>
      <div class="angle3"></div>
      <div class="angle3 angle4"></div>
      <div class="angle3 angle5"></div>
      <div class="angle3 angle6"></div>
      <div class="angle7"></div>
      <div class="angle8"></div>
      <div class="angle8 angle9"></div>
      <div class="angle7 angle10"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "goodsManagerNav",
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="scss" scope>
a {
  color: #000;
}
@import "~@/assets/scss/triangle.scss";
.angle {
  @include triangle(10px, bottom);
  top: 139px;
  left: 241px;
}
.angle1 {
  left: 476px;
}
.angle2 {
  @include triangle(10px, top);
  left: 825px;
  top: 241px;
}
.angle3 {
  @include triangle(10px, left);
  left: 308px;
  top: 290px;
}
.angle4 {
  left: 542px;
}
.angle5 {
  left: 778px;
}
.angle6 {
  left: 1012px;
}
.angle7 {
  @include triangle(10px, right);
  left: 874px;
  top: 290px;
}
.angle8 {
  @include triangle(10px, bottom);
  left: 354px;
  top: 339px;
}
.angle9 {
  left: 825px;
}
.angle10 {
  left: 640px;
  top: 492px;
}
.tableText {
  position: relative;
  width: 1200px;
  height: 600px;
  margin: 20px auto 0;
  box-shadow: 0 0 4px #ccc;
  padding: 0 80px;
  text-align: center;
  .head,
  .center,
  .footer {
    display: flex;
    height: 200px;
    line-height: 200px;
    justify-content: space-between;
    align-items: center;
    div {
      display: inline-block;
      width: 100px;
      height: 100px;
      box-shadow: 1px 1px 2px #aaa;
      background: #eee;
      line-height: 100px;
      text-align: center;
      cursor: pointer;
    }
  }
  .head {
    padding: 0 120px;
  }
  .line {
    position: absolute;
    width: 50px;
    height: 50px;
    border-left: 2px solid #333;
    top: 150px;
    left: 250px;
  }
  .line1 {
    left: 485px;
  }
  .line2 {
    left: 720px;
  }
  .line3 {
    left: 950px;
  }
  .line4 {
    left: 834px;
    top: 200px;
  }
  .line5 {
    left: 362px;
    top: 200px;
  }
  .line6 {
    width: 237px;
    border-bottom: 2px solid #333;
    position: absolute;
    top: 198px;
    left: 250px;
  }
  .line7 {
    width: 232px;
    border-bottom: 2px solid #333;
    position: absolute;
    top: 198px;
    left: 720px;
  }
  .line8 {
    width: 136px;
    border-bottom: 2px solid #333;
    position: absolute;
    top: 300px;
    left: 180px;
  }
  .line9 {
    left: 415px;
  }
  .line10 {
    left: 650px;
  }
  .line11 {
    left: 885px;
  }
  .line12 {
    width: 370px;
    border-bottom: 2px solid #333;
    position: absolute;
    top: 500px;
    left: 651px;
  }
  .line13 {
    left: 180px;
  }
  .line14 {
    height: 150px;
    border-left: 2px solid #333;
    position: absolute;
    top: 350px;
    left: 834px;
  }
  .line15 {
    left: 363px;
  }
}
</style>